<template>
    <van-cell :icon="icon" :required="option.editable && option.required" :title="option.title" label="">
        <template #label>
            <template v-if="option.editable">
                <div style="height: 7px;"></div>
                <van-radio-group v-model="value" direction="horizontal" >
                    <van-radio :name="v" v-for="v in option.values">{{v}}</van-radio>
                </van-radio-group>
            </template>
            <template v-else>
                {{value}}
            </template>
        </template>
    </van-cell>
</template>

<script>
    export default {
        props:["option"],
        name: "radio",
        computed:{
            icon(){
                if(this.option.editable){
                    return "edit";
                } else {
                    return "";
                }
            }
        },
        watch:{
            value(nv){
                this.option.value = nv
                // console.log("value changed", nv)
            }
        },
        data(){
            return {
                value: ""
            }
        },
        methods:{
        },
        mounted() {
            if(this.option.value === null){
                if(this.option.orgchecked){
                    this.option.value = this.option.values[this.option.orgchecked.replace("orgchecked", "")]
                } else if(this.option.defaultValue){
                    this.option.value = this.option.defaultValue;
                }
            }
            this.value = this.option.value;

        }

    }
</script>

<style scoped>
    .van-cell{
        text-align: left;
    }
    /*.van-cell{*/
    /*    border-bottom: 1px solid #ddd;*/
    /*}*/
</style>
